<template>
    <div id="tmpl">
        <!--图片分类-->
        <div class="photolist">
            <ul>
                <li @click="getimglist(0)">全部</li>
                <li v-for="item in list" @click="getimglist(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <div id="imglist">
            <ul>
                <li v-for="(item,index) in imglist" :key='index'>
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img v-lazy="item.img_url">
                        <div id="desc">
                            <h5 v-text="item.title"></h5>
                            <p v-text="item.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>


    </div>
</template>
<script>
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui';

    export default{
        data:function(){
            return{
                list:[],
                imglist:[],
            }
        },
        created:function(){
            this.getphotolist();
            var all=0;
            this.getimglist(all)
        },
        methods:{
            getphotolist:function(){
                var url =common.apidomain+'/api/getimgcategory'
                this.$http.get(url).then(function(res){
                    var body =res.body;
                    if(body.status!=0){
                        Toast(body.message)
                        return
                    };
                    this.list=body.message;
                })
            },
            getimglist:function(photoid){
                var url = common.apidomain+'/api/getimages/'+photoid;
                this.$http.get(url).then(function(res){
                    var body=res.body;
                    if(body.status!=0){
                        Toast(body.message);
                        return
                    };
                    this.imglist=body.message
                })
            }
        }
    }

</script>
<style scoped>
    .photolist{
        width: 375px;
        max-width: 375px;
        overflow-x: auto;
    }
    .photolist ul{
        padding-left:0px;
        margin:0;
        width: 1000px;
    }
    .photolist li{
        list-style: none;
        float: left;
        padding-left: 5px;
        color:#007aff;
        cursor: pointer;
    }
    #imglist ul{
        padding-left:0px;
    }
    #imglist li{
        list-style: none;
        position: relative;
    }
    #imglist img{
        width: 100%;
        height: 300px;
    }
    #desc{
        position: absolute;
        bottom: 5px;
        background-color: rgba(0, 0, 0, 0.4);
        color: #ffffff;
        width: 100%;
        padding: 5px;
    }
</style>